<template>
	<view>
		<view class="cu-custom" :style="[{ height: setting.CustomBar + 'px' }]">
			<view class="cu-bar fixed" :style="headerStyle"
				:class="[bgImage != '' ? 'none-bg text-white bg-img' : '', bgColor]">
				<view class="action flex" @tap="handleBackPage">
					<view class="cu-avatar round  bg-white">
						<image class="round" src="../static/home/icon_home.png"></image>
					</view>
					<view class="text-size-36 text-blod  margin-left-xs">{{ props.title }}</view>
				</view>
				<view class="content text-size-32" :style="[{ top: setting.StatusBar + 'px' }]">
					<slot name="content"></slot>
				</view>
				<slot name="right"></slot>
			</view>
		</view>
		
	</view>
</template>

<script setup lang="ts">
	import { useSettingStore } from '@/stores/index';
	import { onMounted, computed, ref } from 'vue';
	import { onShow } from '@dcloudio/uni-app';
	const setting = useSettingStore();
	const emit = defineEmits(['action']);
	const visibleModal = ref('');
	onMounted(()=>{
	
	})
	const props = defineProps({
		bgColor: {
			type: String,
			default: ''
		},
		isBack: {
			type: [Boolean, String],
			default: false
		},
		bgImage: {
			type: String,
			default: ''
		},
		title: {
			type: String,
			default: '工作台'
		}
	});
	const info = ref({
		"id": "",
		"username": null,
		"realName": null,
		"nickname": "游客",
		"avatarUrl": "",
		"phone": "",
		"address": null,
		"email": null,
		"birthday": null,
		"gender": 1,
		"roleKeys": [],
		"msgNum": "0",
		"surplus": null,
	});
	const headerStyle = computed(() => {
		var StatusBar = setting.StatusBar;
		var CustomBar = setting.CustomBar;
		var bgImage = props.bgImage;
		var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
		if (props.bgImage) {
			style = `${style}background-image:url(${bgImage});`;
		}
		return style;
	});
	const handleBackPage = (res : any) => {
		if (setting.token.length > 0) {
			// uni.navigateTo({
			// 	url: '/views/user/info'
			// });
			visibleModal.value = 'DrawerModalL';
		} else {
			uni.navigateTo({
				url: '/views/login/phonelogin'
			});
		}
	};
	
	onShow(() => {
		//onUserInfo();
	});
</script>

<style scoped>
	.cu-bar .cu-avatar:first-child {
		margin-left: 0rpx;
	}
	.text-size-36{
		font-weight: 800;
	}
</style>